<template>
	<div class="merchant_materials">
		<div class="select_con">
			<a-select v-model:value="searchParams.type" placeholder="请选择" style="width: 100%;"
				:options="selectOptions" @change="handleSelectChange"></a-select>
		</div>

		<div class="tab_con" v-if="tagList.length>0">
			<div class="tab_item" @click="tabChange(index)" v-for="(item, index) in tagList" :key="index">
				<div :class="currentIndex == index?'active':''" class="tab_text">{{item.name}}</div>
				<div v-if="currentIndex == index" class="tab_icon"></div>
			</div>
		</div>

	</div>
</template>

<script>
	import request from "../../../../../../common/utils/request";
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
	} from "vue";
	import store from '@/store';
	export default defineComponent({
		props: {
			tagList: {
				type: Array,
				default: ()=> {return []}
			}
		},
		setup(props, context) {
			const state = reactive({
				searchParams: {
					type: 1
				},
				selectOptions: [],
				libraryList: [],
				currentIndex: 0,
			});

			const tabChange = (index) => {
				if (state.currentIndex == index) return
				state.currentIndex = index
				context.emit('folderType', index)
			}
			
			const getLibraryList = () => {
				state.selectOptions = []
				request.get('/work_ai', '/user/shotstack/library/withGroup/list', {merchant_library_id: store.getters.clipJSON.merchant_library_id}).then(res=> {
					let index = res.result.findIndex(item=>item.id == store.getters.clipJSON.merchant_library_id)
					if(index != -1){
						state.libraryList = res.result[index].folder_group
						state.libraryList.map(v=>{
							state.selectOptions.push({
								label: v.group_name,
								value: v.id
							})
						})
						state.searchParams.type = state.libraryList[0].id
						state.currentIndex = 0
						context.emit('getCurrentLibrary', state.libraryList[0])
					}
				})
			}

			const handleSelectChange = (value) => {
				state.searchParams.type = value
				state.currentIndex = 0
				let obj = state.libraryList.find(v=>v.id == value)
				context.emit('getCurrentLibrary', obj)
			}
			
			watch(()=>store.getters.clipJSON?.merchant_library_id, val=> {
				getLibraryList()
			},{
				deep: true,
				immediate: true
			})
			
			return {
				...toRefs(state),
				tabChange,
				handleSelectChange
			}
		},
	});
</script>

<style lang="less" scoped>
	:deep(.ss-select .ss-select-selector) {
		background-color: #333 !important;
		color: #fff !important;
		border: none !important;
		&:hover {
			border: none !important;
			box-shadow: none !important;
		}

		&:focus {
			border: none !important;
		}

		&:focus-within {
			border: none !important;
		}
	}
	
	:deep(.ss-select-arrow){
		color: #fff !important;
	}
	
	:deep(.ss-select-selection-item){
		background-color: #333;
		color: #fff;
	}
	
	.merchant_materials {
		.select_con {}

		.tab_con {
			display: flex;
			margin-top: 15px;

			.tab_item {
				margin-left: 25px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				cursor: pointer;
				font-size: 14px;
				&:nth-child(1) {
					margin-left: 0;
				}

				.tab_text {
					color: #eee;

					&.active {
						color: #2878FF;
					}
				}

				.tab_icon {
					width: 100%;
					height: 2px;
					background-color: #2878FF;
					margin-top: 5px;
				}
			}
		}
	}
</style>